<template>
  <div class="Login">
    <div class="reg_logo_hd bbz_accounts_logo_hd">
      <h1 class="ctriplogo_reg">
        <router-link to="/hotel" title="旅行网">旅行网</router-link>
      </h1>
      <span id="bbz-accounts-assist" class="assist"><em class="ico-assist"></em>网站无障碍</span>
    </div>
    <RegisterAccount v-if="showNum==1"></RegisterAccount>
    <RegisterPassword v-else-if="showNum==2"></RegisterPassword>
    <RegisterSuccess v-else></RegisterSuccess>
    <RegisterPopup v-if="showPop==1" @send-data="getShowPop"></RegisterPopup>
  </div>
</template>

<script>
import RegisterAccount from '@/components/RegisterAccount.vue'
import RegisterPassword from '@/components/RegisterPassword.vue'
import RegisterSuccess from '@/components/RegisterSuccess.vue'
import RegisterPopup from '@/components/RegisterPopup.vue'
import { mapState } from 'vuex'
export default {
  name: 'register',
  data() {
    return {
      showPop: 1
    }
  },
  components: {
    RegisterAccount,
    RegisterPassword,
    RegisterSuccess,
    RegisterPopup
  },
  methods: {
    getShowPop(data) {
      this.showPop = data
    }
  },
  computed: {
    ...mapState({
      showNum: state => {
        return state.register.showNum
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.reg_logo_hd {
  width: 980px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
  .assist {
    float: right;
    padding: 0 15px 0 13px;
    line-height: 90px;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    .ico-assist {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-right: 2px;
      overflow: hidden;
      background: url('../assets/images/icon-assist.png') no-repeat center center;
    }
  }
}
.ctriplogo_reg {
  float: left;
  width: 200px;
  padding-top: 18px;
  a {
    display: block;
    width: 100%;
    height: 60px;
    text-indent: -999em;
    background: url('../assets/images/c_logo2013.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>